<template>
	<view class="page">
		<headnav leftText="我的订单" ></headnav>
		<view class="pageBox">
		    <tabData :dataList="tabData" ref="tabClass" @changeTab="changeClassTab"></tabData>
			<view class="orderlistBox">
				<swiper id="swiper" ref="mySwiper" @change="swipeChange" :current="tabIndex" :duration="200">
						<swiper-item v-for="(item,index) in tabData" :key="index">
							<orderItem :swiperIndex="index" ref='orderItem' :requstType="tabData[tabIndex].id" :activeItem="tabIndex"></orderItem>
					   </swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>
<script>
	// import booklistIitemVue from './booklistIitem.vue';
	import tabData from '@/components/tab-data/tab-data.vue';
	import orderItem from './order-item.vue';
	export default {
		components: {
		    // booklistIitemVue,
			orderItem,
			tabData
		},
		data() {
			// 订单类型 空为全部 0待付款 7已预定 8付尾款 1已购买 9已发货
			return {
				tabIndex:0,
				tabData:[
					{
					  "name":'全部',
					  "id":''
					},
					{
					  "name":'待付款',
					  "id":0
					},
					{
					  "name":'已预订',
					  "id":7
					},
					{
					  "name":'付尾款',
					  "id":8
					},
					{
					  "name":'已购买',
					  "id":1
					},
					{
					  "name":'收货',
					  "id":9
					},
					{
					  "name":'售后/退款',
					  "id":22
					}	
				]
			}
		},
		onShow() {
		    if(this.$refs.orderItem) {
				this.$refs.orderItem[this.tabIndex].onshowRefresh();
			}
		},
		onLoad() {
		   const index = this.$Route.query.id;
		   if(index) {
			   this.tabIndex = index;
			   setTimeout(()=> {
			   	  this.$refs.tabClass.ontabtap(index);
			   })
		   }
		},
		methods: {
			changeClassTab(e) {
				this.tabIndex = e;
			},	
			swipeChange(e) {
				let current =  e.detail.current;
				setTimeout(()=> {
					this.$refs.tabClass.ontabtap(current);
				})
			}
		}
	}
</script>

<style lang="scss">
   .page {
	   background-color:#f5f8fa;
	   @include pageCol
   }
   // .orderlistBox {
	  //  width: 100%;
	  //  height: calc(100vh - 290rpx);
   // }
   
   #swiper {
   	 height: calc(100vh - 290rpx);
   }
</style>
